<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>支付</title>
    <style type="text/css">
        .container-section {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            padding: 40px 0px;
        }

        .top-section {
            width: 60%;
            margin-left: auto;
            margin-right: auto;
        }

        .progress-bar {
            width: 30%;
            float: left;
            color: #0662a6;
            text-align: center;
            font-weight: bold;
            margin-right: 10px;
            padding-top: 15px;
            padding-bottom: 15px;
            letter-spacing: 1px;
            border-bottom: 6px solid #dfdfdf;
        }

        .progress-primary {
            color: #0662a6;
            border-bottom: 6px solid #0662a6;
        }

        .clean {
            clear: both;
        }

        .main-section {
            width: 100%;
            margin-top: 35px;
            padding-bottom: 30px;
            background-color: #f8f8f8;
        }

        .total-section {
            color: #000;
            height: 60px;
            line-height: 60px;
            padding-left: 50px;
            font-size: 24px;
            font-weight: bold;
            background-color: #ebf3f8;
        }

        .total-account {
            padding-left: 4px;
            text-decoration: underline;
        }

        .fee-info-section {
            margin-top: 50px;
            margin-left: 43px;
            margin-right: 43px;
            border-radius: 5px;
            border: 1px solid #535353;
            font-family: Arial, "Microsoft YaHei";
        }

        .fee-info-section table {
            width: 100%;
            color: #000;
            font-weight: bold;
            padding: 12px;
        }

        .fee-info-section td {
            height: 30px;
            font-size: 14px;
        }

        .tip-section {
            color: #333;
            font-size: 14px;
            font-family: Arial, "Microsoft YaHei";
            margin-left: 18px;
            margin-right: 18px;
            padding: 20px 40px;
            border-bottom: 1px solid #eeeeee;
        }

        .fee-name, .fee-num {
            width: 10%;
        }

        .fee-desc {
            text-align: center;
            width: 50%;
        }

        .fee-price, .fee-total {
            text-align: center;
            width: 15%;
        }

        .fee-num {
            text-align: center;
        }

        .pay-section {
            padding-top: 86px;
            padding-left: 100px;
            padding-right: 100px;
        }

        .pay-list {
            color: #808080;
            float: left;
            margin-right: 50px;
        }

        .pay-list-primary {
            color: #0000fd;
        }

        .btn-section {
            text-align: center;
            padding-top: 44px;
        }

        .btn-section div {
            margin-bottom: 18px;
        }

        .btn {
            color: #fff;
            width: 194px;
            height: 37px;
            border: 0px;
            font-weight: bold;
            font-size: 18px;
        }

        .btn-red {
            background-color: #ff3937;
        }

        .btn-blue {
            background-color: #0b7bd7;
        }

        .selection-box {
            float: left;
            width: 25px;
            height: 25px;
            margin-right: 8px;
            border-radius: 50%;
            cursor: pointer;
            display: inline-block;
            border: 1px solid #d1d1d1;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url("<s:url value="/views/yxtPc/assets/img/circle.png"/>");
        }

        .pay-list-selection {
            line-height: 21px;
        }

        div.pay-list-primary {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript"
            src="<s:url value="../js/jquery/jquery-1.8.0.min.js"/> "></script>
    <script type="text/javascript" src="<s:url value="../js/hint/jquery.hint.js"/>"></script>
    <script type="text/javascript"
            src="<s:url value="../js/jquery/jquery.json-2.2.js"/>"></script>
    <script type="text/javascript" src="<s:url value="../js/jw/jw.js"/>"></script>
    <script type="text/javascript" src="<s:url value="../js/pay/mousewheel.js"/>"></script>
    <script type="text/javascript" src="<s:url value="../js/ajaxutil.js"/>"></script>
    <script type="text/javascript">
        var sum_free = "${sum_fee}";
        var balance = "${balance}";
        $(document).ready(function () {
            if (parseFloat(balance) < parseFloat(sum_free)) {
                $("span.balance-tip").show();
            }
            /**
             * 显示后台错误
             */
            showErrorMessage();
        });
        function gotoPay() {
            $(".recharge").removeAttr('onclick');
            if ($("input[name='payAccountType']").val()) {
                $.ajax({
                           url: "<s:url value='/order/business-payMent?pay_id='/>${pay_id}&paymentType="
                                + $("input[name='payAccountType']").val(),
                           dataType: "json",
                           type: "post",
                           data: {},
                           success: function (data) {
                               if (data.payMent != 'error') {
                                   if ("success" == data.payMent) {
                                       window.location.href =
                                           "<s:url value="/business/payAbcAction-payAbcSuccess?pay_id="/>${pay_id}";
                                   }
                                   else if ("balance_error" == data.payMent) {
                                       alert('余额不足');
                                       history.go(0)
                                   }
                                   else {
                                       alert('出现内部错误，即将结束本次支付！');
                                       window.location.href =
                                           "<s:url value="/business/unpaidMain"/>";
                                   }
                               } else {
                                   alert('订单存在不正确信息');
                               }

                           }
                       });
            } else {
                alert("请选择支付方式");
            }
        }

        function backToUnpaidMain() {
            parent.openUnpaidMainAndCurrentActiveTab();
        }

        /**
         * 提示错误信息
         */
        function showErrorMessage() {
            var errMessage = "${errorMessage}";
            if (errMessage) {
                alert("出错了！！ " + errMessage);
                location.href = "<s:url value="/business/unpaidMain" />";
            }
        }
    </script>
</head>
<body>
<div class="container-section">
    <div class="top-section">
        <div class="progress-bar progress-primary">
            提交订单
        </div>
        <div class="progress-bar progress-primary">
            在线支付
        </div>
        <div class="progress-bar">
            支付完成
        </div>
        <div class="clean"></div>
    </div>
    <div class="main-section">
        <div class="total-section">
            订单总费用:￥<span class="total-account">${sum_fee}</span>
        </div>
        <div class="fee-info-section">
            <table>
                <thead>
                <tr>
                    <td class="fee-name">费用名称</td>
                    <td class="fee-desc">描述</td>
                    <td class="fee-num">数量</td>
                    <td class="fee-price">单价</td>
                    <td class="fee-total">金额</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="fee-name">&nbsp;</td>
                    <td class="fee-desc">&nbsp;</td>
                    <td class="fee-num">&nbsp;</td>
                    <td class="fee-price">RMB</td>
                    <td class="fee-total">RMB</td>
                </tr>
                <c:forEach items="${chargingList}" var="fee">
                    <tr>
                        <td class="fee-name">${fee.name}</td>
                        <td class="fee-desc">${fee.descript}</td>
                        <td class="fee-num">${fee.count}</td>
                        <td class="fee-price">${fee.unitPrice}</td>
                        <td class="fee-total">${fee.totalPrice}</td>
                    </tr>
                </c:forEach>
                </tbody>
                <tfoot>
                <tr>
                    <td class="fee-name">&nbsp;</td>
                    <td class="fee-desc">&nbsp;</td>
                    <td class="fee-num">&nbsp;</td>
                    <td class="fee-price">合计：</td>
                    <td class="fee-total">${sum_fee}</td>
                </tr>
                </tfoot>
            </table>
        </div>
        <div class="tip-section">
            如有疑问,欢迎来电咨询。报关行电话：<span class="contract-tel">${brokerPhone}</span>
        </div>
        <div class="pay-section">
            <div class="pay-list pay-list-selection">
                <span class="selection-box"></span>
                <input type="hidden" value="1"/>
                <!-- <div> -->
                余额支付（<span class="balance">￥${balance}</span>）<span class="balance-tip"
                                                                    style="display: none">余额不足</span>
                <!-- </div> -->
            </div>
            <div class="pay-list pay-list-primary reCharge"
                 onclick="window.open('../fund/ajustment-main')">
                马上预付款
            </div>
            <div class="pay-list pay-list-primary"
                 onclick="ajaxLoader.ajaxPost('../fund/ajustment-refreshFund',{},function(){window.history.go(0)})">
                刷新余额
            </div>
            <div class="clean"></div>
        </div>
        <div class="btn-section">
            <div>
                <button type="button" class="btn btn-red" onclick="gotoPay()">在线支付</button>
                <input type="hidden" name="payAccountType" value="2">
            </div>
            <div>
                <button type="button" class="btn btn-blue" onclick="goBack()">返回</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".selection-box").on("click", function () {
            if (/\.png/.test($(this).css("background-image"))) {
                $(this).css("background-image", 'url()').next("input").val("0");
            } else {
                $(this).css("background-image",
                            'url(<s:url value="/views/yxtPc/assets/img/circle.png"/>)')
                    .next("input").val("1");
            }
        })
    });
    function goBack() {
        parent.openUnpaidMainAndCurrentActiveTab();
    }
</script>
</body>
</html>
